<template>
  <div>
      <Button type="primary" @click="modal1 = true" style="margin-bottom:20px">发表评论</Button>
    <Modal
        v-model="modal1"
        title="评论内容"
        @on-ok="ok"
        @on-cancel="cancel">
        <el-form-item label="内容">
           <quill-editor v-model="newsContent"></quill-editor>
        </el-form-item>
    </Modal>
      <Table :data="commData" border :columns="commColumns" height='280'  :highlight-row="true"></Table>
      <!--@on-selection-change="onSelectionChangeHandler" @on-select-cancel="onSelectCancelHandler"-->
      <Page :total="filter.total" show-sizer :page-size-opts="filter.pagesize" :page-size="filter.limit" @on-change="onChangeHandler" @on-page-size-change="onPageSizeChangeHandler"></Page>

      
  </div>
</template>

<script>
import Bus from '../Bus';
import quillEditor from "../QuillEditor";
export default {
  components:{
    quillEditor
  },
  data(){
    return {
      modal1: false,
      newsContent:'',
      commData:[],
      rowId:[],
      filter:{
                total:0,
                page:1,
                limit:5,
                pagesize:[5,10,15,20],
            },
      commColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '评论',
                        key: 'title',
                        align: 'center',
                        // render :(h,params) => {
                        //   return h(
                        //     "span",
                        //     {
                        //       domProps:{
                        //         innerHTML: this.commData[3].title
                        //       }
                        //     }
                        //   )
                        // }
                    },
                    {
                        title: '评论时间',
                        key: 'timer',
                        width: 120,
                        align: 'center'
                    }
                  ]
    }
  },
  // created(){
  //     Bus.$on('filerowId', id => {
  //       this.filter.cateId = id;
  //       var bodystring = this.filter;
  //       fetch('http://localhost:3000/commont/list',{
  //         method:'post',
  //         headers:{'Content-Type':'application/json'},
  //         body:JSON.stringify(bodystring)
  //       })
  //       .then( res => {
  //         return res.json();
  //       })
  //       .then( data => {
  //         this.commData = data.rows;
  //       })
  //     });
  // },
  created(){
      Bus.$on('filerowData', data => {
        this.commData = data.rows;
        this.filter.total = data.total;
      });
      Bus.$on('filerowId', id => {
        this.rowId = id;
      });
  },
  methods:{
    onPageSizeChangeHandler(limit){
            this.filter.limit = limit;
            this.getdata();
        },
        onChangeHandler(page){
            this.filter.page = page;
            this.getdata();
        },
      ok(){
          fetch('http://localhost:3000/commont/data',{
            method:'post',
            headers:{'Content-Type':'application/json'},
            body:JSON.stringify({
              title:this.newsContent,
              cateId:this.rowId
            })
          })
          .then(res => {
            return res.json();
          })
          .then(data => {
            this.getdata();
            this.$Message.info('发表成功');
          })
          Bus.$emit('numdata',this.num);
      },
      cancel(){
          this.$Message.info('发表评论失败!');
      },
      getdata(){
        this.filter.cateId = this.rowId;
        var bodystring = this.filter;
        fetch('http://localhost:3000/commont/list',{
          method:'post',
          headers:{'Content-Type':'application/json'},
          body:JSON.stringify(bodystring)
        })
        .then( res => {
          return res.json();
        })
        .then( data => {
          this.filter.total = data.total;
          this.commData = data.rows;
        })
      }
  },
}
</script>

